<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('个人信息')" />
</head>
<body class="white-bg">

	<style>
		input{
			text-align: center;
		}
		select{
			text-align: center;
		}
	</style>

	<div class="container-div" id="gerenxinxi">

		<div class="row">

			<!--个人信息维护-->
			<form class="col-sm-6 form-horizontal">

				<div class="form-group" style="text-align: center">
					<h2 class="col-sm-12">个人信息</h2>
				</div>

				<div class="form-group">
					<label class="col-sm-3 control-label is-required">登录账号</label>
					<div class="col-sm-8">
						<input v-model="userItem.loginName"  placeholder="请输入登录账号" class="form-control" type="text" maxlength="30" required disabled>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label is-required">用户名</label>
					<div class="col-sm-8">
						<input v-model="userItem.userName" name="userName" placeholder="请输入用户名" class="form-control" type="text" maxlength="30" required>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">所属部门</label>
					<div class="col-sm-8">
						<input v-model="userItem.text1" class="form-control " type="text" placeholder="请输入所属部门">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label is-required">手机</label>
					<div class="col-sm-8">
						<input v-model="userItem.phonenumber"  placeholder="请输入手机号码" class="form-control" type="text" maxlength="11">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">办公电话</label>
					<div class="col-sm-8">
						<input v-model="userItem.text2" class="form-control" type="text" placeholder="请输入办公电话">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">电子邮箱</label>
					<div class="col-sm-8">
						<input v-model="userItem.email" class="form-control email" type="text" maxlength="50" placeholder="请输入电子邮箱">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">修改密码</label>
					<div class="col-sm-8">
						<input class="form-control" type="password" name="password" id="password" v-model="pwd">
					</div>
				</div>

				<div class="form-group">
					<div class="col-sm-12" style="text-align: center">
						<button type="button" class="btn btn-warning btn-lg" @click="saveUser">保存个人信息</button>
						<!--<button class="btn btn-warning btn-rounded btn-md" @click="resetPwd(userItem)">修改密码</button>-->
					</div>
				</div>
			</form>

			<!--单位信息维护-->
			<form class="col-sm-6 form-horizontal">

				<div class="form-group" style="text-align: center">
					<h2 class="col-sm-12">单位信息</h2>
				</div>

				<div class="form-group">
					<label class="col-sm-3 control-label is-required">特贴单位</label>
					<div class="col-sm-8">
						<input class="form-control" type="text" name="deptname" v-model="dept.deptname" required>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label ">管理部门</label>
					<div class="col-sm-8">
						<input class="form-control" type="text" name="guanlibumen" v-model="dept.guanlibumen" >
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">单位类型</label>
					<div class="col-sm-8">
						<select name="depttype" th:with="type=${@dict.getType('sys_jigouleixing')}" v-model="dept.depttype" class="form-control" type="text">
							<option value="">请选择</option>
							<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
						</select>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">地区</label>
					<div class="col-sm-4">
						<select id="shengfen" name="shengfen" v-model="dept.shengfen" class="form-control" type="text" @change="BindDiquByShengfen()">
							<option value="">请选择</option>
							<option v-for="shengfen in shengfenlist" :value="shengfen.id">{{shengfen.text}}</option>
						</select>
					</div>
					<div class="col-sm-4">
						<select id="chengshi" name="chengshi" v-model="dept.chengshi" class="form-control" type="text">
							<option value="">请选择</option>
							<option v-for="chengshi in chengshilist" :value="chengshi.id">{{chengshi.text}}</option>
						</select>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">地址</label>
					<div class="col-sm-8">
						<input class="form-control" type="text" name="dizhi" v-model="dept.dizhi">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">邮编</label>
					<div class="col-sm-8">
						<input class="form-control" type="text" name="youbian" v-model="dept.youbian">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">传真号码</label>
					<div class="col-sm-8">
						<input class="form-control" type="text" name="chuanzhen" v-model="dept.chuanzhen">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">电子邮箱</label>
					<div class="col-sm-8">
						<input class="form-control" type="text" name="email" v-model="dept.email">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label is-required">经办人</label>
					<div class="col-sm-8">
						<input class="form-control" type="text" name="jingbanren" v-model="dept.jingbanren">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label is-required">经办人办公电话</label>
					<div class="col-sm-8">
						<input class="form-control" type="text" name="jingbanrenbangongdianhua" v-model="dept.jingbanrenbangongdianhua">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label is-required">经办人手机</label>
					<div class="col-sm-8">
						<input class="form-control" type="text" name="jingbanrenshouji" v-model="dept.jingbanrenshouji">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">负责人</label>
					<div class="col-sm-8">
						<input class="form-control" type="text" name="fuzeren" v-model="dept.fuzeren">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">负责人办公电话</label>
					<div class="col-sm-8">
						<input class="form-control" type="text" name="fuzerenbangongdianhua" v-model="dept.fuzerenbangongdianhua">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">负责人手机</label>
					<div class="col-sm-8">
						<input class="form-control" type="text" name="fuzerenshouji" v-model="dept.fuzerenshouji">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label is-required">财务联系人</label>
					<div class="col-sm-8">
						<input class="form-control" type="text" name="caiwurenyuan" v-model="dept.caiwurenyuan">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label is-required">财务办公电话</label>
					<div class="col-sm-8">
						<input class="form-control" type="text" name="caiwurenyuanbangongdianhua" v-model="dept.caiwurenyuanbangongdianhua">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label is-required">财务手机</label>
					<div class="col-sm-8">
						<input class="form-control" type="text" name="caiwurenyuanshouji" v-model="dept.caiwurenyuanshouji">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label is-required">开户行</label>
					<div class="col-sm-8">
						<input class="form-control" type="text" name="kaihuhang" v-model="dept.kaihuhang">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label is-required">开户名</label>
					<div class="col-sm-8">
						<input class="form-control" type="text" name="kaihuming" v-model="dept.kaihuming">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label is-required">银行帐号</label>
					<div class="col-sm-8">
						<input class="form-control" type="text" name="yinhangzhanghao" v-model="dept.yinhangzhanghao">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">银行地址</label>
					<div class="col-sm-8">
						<input class="form-control" type="text" name="yinhangdizhi" v-model="dept.yinhangdizhi">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">联行号</label>
					<div class="col-sm-8">
						<input class="form-control" type="text" name="lianhanghao" v-model="dept.lianhanghao">
					</div>
				</div>

				<div class="form-group" v-if="roleid=='100'||roleid=='102'||roleid=='1'">
					<div class="col-sm-12" style="text-align: center">
						<button type="button" class="btn btn-warning btn-lg" @click="save">保存单位信息</button>
					</div>
				</div>
			</form>
		</div>
	</div>

	<th:block th:include="include :: footer" />
	<script>
		var vm_gerenxinxi = new Vue({
			el : "#gerenxinxi ",
			data : {
				userid : $("#userid").val(),
				deptid : $("#deptid").val(),
				roleid : $("#roleid").val(),		// deptid
				dept : {},//单位

				//字典表
				shengfenlist:[],//省份
				chengshilist:[],//城市

				pwd:"",

				//字段
				userItem:{
					loginName: "",
					phonenumber: "",
					email: "",
					userName:"",
					text1:"",//所属部门
					text2:"",//办公电话
					remark:""
				},

			},
			created : function(){
				var _this = this;

				//初始化界面控制
				_this.InitControl();

				_this.bindUser();
				_this.bindDept();
			},
			methods : {

				InitControl:function(){
					var _this = this;

					_this.BindShengfen();
					_this.BindDiqu();
					_this.BindChengshiByShengfen();
				},

				BindShengfen:function(){
					var _this = this;

					var dept_layer = layer.open({type: 3});
					$.post('/system/shengfen/findallshengfen', {
						rdm: Math.random()
					}, function (ppData) {
						layer.close(dept_layer);

						if (ppData != null) {
							var data = ppData;
							_this.shengfenlist = data.resultContent;
						}
					}, "json");
				},

				BindDiqu:function(){
					var _this = this;

					var dept_layer = layer.open({type: 3});
					$.post('/system/chengshi/findallchengshi', {
						rdm: Math.random()
					}, function (ppData) {
						layer.close(dept_layer);

						if (ppData != null) {
							var data = ppData;
							_this.chengshilist = data.resultContent;
						}
					}, "json");
				},

				BindChengshiByShengfen:function(){
					var _this = this;

					_this.dept.chengshi = '';

					var dept_layer = layer.open({type: 3});
					$.post('/system/chengshi/findallchengshi', {
						shengfenid : _this.dept.shengfen,
						rdm: Math.random()
					}, function (ppData) {
						layer.close(dept_layer);

						if (ppData != null) {
							var data = ppData;
							_this.chengshilist = data.resultContent;
						}
					}, "json");
				},

				//用户信息
				bindUser:function(){
					var _this = this;
					var dept_layer = layer.open({type: 3});
					$.post('/system/user/findone', {
						userid: _this.userid,
						rdm: Math.random()
					}, function (ppData) {
						layer.close(dept_layer);
						if (ppData != null) {

							if(ppData.result == "1"){
								_this.userItem = ppData.resultContent;
							}else{
								layer.alert(ppData.message);
							}

						}
					}, "json");
				},

				//单位信息
				bindDept : function(){
					var _this = this;

					var dept_layer = layer.open({type:3});
					$.post('/system/deptxinxi/customone', {
						deptid : _this.deptid,
						rdm : Math.random()
					},function(ppData) {
						layer.close(dept_layer);

						if(ppData != null){

							if(ppData.result == "1"){
								var data = ppData.resultContent;
								_this.dept = data;
							}else{
								layer.alert(ppData.message);
							}
						}
					},"json");
				},

				// 保存用户信息
				saveUser : function(){
					var _this = this;

					if (!$.trim(_this.userItem.userName)) {
						layer.alert("请填写用户名！");
						return false;
					}

					if (!$.trim(_this.userItem.phonenumber)) {
						layer.alert("请填写手机！");
						return false;
					}

					var dept_layer = layer.open({type: 3});
					$.post('/system/user/customedit', {
						userId:_this.userid,
						phonenumber:_this.userItem.phonenumber,
						email:_this.userItem.email,
						userName:_this.userItem.userName,
						loginName:_this.userItem.loginName,
						suoshubumen:_this.userItem.text1,//所属部门
						bangongdianhua:_this.userItem.text2,//办公电话
						remark:_this.userItem.remark,
						password:_this.pwd,//密码
						rdm: Math.random()
					}, function (ppData) {
						layer.close(dept_layer);
						if (ppData != null) {

							if(ppData.code == "0"){
								layer.open({
									time: 1000,
									btn: [],
									content: ppData.msg,
								});
							}else{
								layer.alert(ppData.msg);
							}

						}
					}, "json");
				},

				// 保存单位信息
				save : function(){
					var _this = this;
					if (_this.checkInputData()) {
						var dept_layer = layer.open({type: 3});
						$.post('/system/deptxinxi/save', {
							deptid: _this.dept.deptid,
							deptname: _this.dept.deptname,
							guanlibumen: _this.dept.guanlibumen,
							depttype: _this.dept.depttype,
							deptlevel: _this.dept.deptlevel,
							shengfen : _this.dept.shengfen,
							chengshi : _this.dept.chengshi,
							dizhi: _this.dept.dizhi,
							youbian: _this.dept.youbian,
							chuanzhen: _this.dept.chuanzhen,
							email: _this.dept.email,
							jingbanren: _this.dept.jingbanren,
							jingbanrenbangongdianhua: _this.dept.jingbanrenbangongdianhua,
							jingbanrenshouji: _this.dept.jingbanrenshouji,
							fuzeren: _this.dept.fuzeren,
							fuzerenbangongdianhua: _this.dept.fuzerenbangongdianhua,
							fuzerenshouji: _this.dept.fuzerenshouji,
							caiwurenyuan: _this.dept.caiwurenyuan,
							caiwurenyuanbangongdianhua: _this.dept.caiwurenyuanbangongdianhua,
							caiwurenyuanshouji: _this.dept.caiwurenyuanshouji,
							kaihuhang: _this.dept.kaihuhang,
							kaihuming: _this.dept.kaihuming,
							yinhangzhanghao: _this.dept.yinhangzhanghao,
							yinhangdizhi: _this.dept.yinhangdizhi,
							lianhanghao: _this.dept.lianhanghao,
							rdm: Math.random()
						}, function (ppData) {
							layer.close(dept_layer);
							if (ppData != null) {

								if(ppData.result == "1"){
									layer.open({
										time: 1000,
										btn: [],
										content: "保存成功!",
									});
								}else{
									layer.alert(ppData.message);
								}

							}
						}, "json");
					}
				},

				//检查项目数据
				checkInputData : function() {
					if (!$.trim(this.dept.deptname)) {
						layer.alert("请填写单位名称！");
						return false;
					}
					if (!$.trim(this.dept.jingbanren)) {
						layer.alert("请填写经办人！");
						return false;
					}
					if (!$.trim(this.dept.jingbanrenbangongdianhua)) {
						layer.alert("请填写经办人办公电话！");
						return false;
					}
					if (!$.trim(this.dept.jingbanrenshouji)) {
						layer.alert("请填写经办人手机号码！");
						return false;
					}
					if (!$.trim(this.dept.caiwurenyuan)) {
						layer.alert("请填写财务联系人！");
						return false;
					}
					if (!$.trim(this.dept.caiwurenyuanbangongdianhua)) {
						layer.alert("请填写财务办公电话！");
						return false;
					}
					if (!$.trim(this.dept.caiwurenyuanshouji)) {
						layer.alert("请填写财务手机号码！");
						return false;
					}
					if (!$.trim(this.dept.kaihuhang)) {
						layer.alert("请填写开户行！");
						return false;
					}
					if (!$.trim(this.dept.kaihuming)) {
						layer.alert("请填写开户名称！");
						return false;
					}
					if (!$.trim(this.dept.yinhangzhanghao)) {
						layer.alert("请填写银行账号！");
						return false;
					}

					return true;
				},

				resetPwd:function () {
					var url = 'system/user/yonghuguanli/resetPwd/' + this.userid;
					$.modal.open("重置密码", url, '800', '300');
				},

			},
		})
	</script>
</body>
</html>
